<template>
    <el-menu
            :default-active="activeIndex"
            mode="horizontal"
            :ellipsis="false"
            :router="true"
            style="display: flex;align-items: center">


        <el-menu-item index="">
            <template #default>
                <img src="@/assets/icon/blog-t.png" style="height: 40px;margin-top: 10px">
            </template>
        </el-menu-item>
        <el-menu-item index="/">
            <el-icon>
                <House/>
            </el-icon>
            首页
        </el-menu-item>
        <el-sub-menu index="1">
            <template v-slot:title>
                <el-icon>
                    <Tickets/>
                </el-icon>
                博客
            </template>
            <el-menu-item index="/allBlogs">
                <el-icon>
                    <Document/>
                </el-icon>
                所有博文
            </el-menu-item>
            <el-menu-item index="/categories">
                <el-icon>
                    <Postcard/>
                </el-icon>
                分类
            </el-menu-item>
            <el-menu-item index="/tag">
                <el-icon>
                    <Discount/>
                </el-icon>
                标签
            </el-menu-item>
            <el-menu-item index="/timeline">
                <el-icon>
                    <Timer/>
                </el-icon>
                时间轴
            </el-menu-item>
        </el-sub-menu>
        <el-menu-item index="/albums">
            <el-icon>
                <Picture/>
            </el-icon>
            相册
        </el-menu-item>
        <!--<el-menu-item index="/friendLink">-->
        <!--  <el-icon>-->
        <!--    <Link/>-->
        <!--  </el-icon>-->
        <!--  友链-->
        <!--</el-menu-item>-->
        <el-menu-item index="/about">
            <el-icon>
                <Position/>
            </el-icon>
            关于
        </el-menu-item>
        <!--<el-menu-item index="/messageBoard">-->
        <!--  <el-icon>-->
        <!--    <ChatDotRound/>-->
        <!--  </el-icon>-->
        <!--  留言板-->
        <!--</el-menu-item>-->
        <!--<el-menu-item index="/admin">-->
        <!--  <el-icon>-->
        <!--    <ChatDotRound/>-->
        <!--  </el-icon>-->
        <!--  后台-->
        <!--</el-menu-item>-->


        <div class="flex-grow"/>
        <!--        <el-menu-item>-->
        <!--            <template v-slot:default>-->
        <el-input
                :clearable="true"
                v-model="sStore.searchText"
                @keydown.enter="openSearch"
                placeholder="你就自己看着搜吧"
                style="width: 300px"
        >
            <template #append>
                <el-button @click="openSearch">
                    <el-icon>
                        <Search/>
                    </el-icon>
                </el-button>
            </template>
        </el-input>
        <!--            </template>-->
        <!--        </el-menu-item>-->
        <el-sub-menu v-if="hasUserInfo" index="0">
            <template #title>
                <img :src="store.getHeaderImg" class="headImg">
                <p> {{ store.userInfo.userNickName }}</p>
            </template>
            <el-menu-item index="/userCenter">
                <el-icon>
                    <User/>
                </el-icon>
                个人中心
            </el-menu-item>
            <el-menu-item index="/star">
                <el-icon>
                    <Star/>
                </el-icon>
                我的收藏
            </el-menu-item>
            <el-menu-item index="" @click="logout">
                <el-icon>
                    <SwitchButton/>
                </el-icon>
                退出登录
            </el-menu-item>
        </el-sub-menu>

        <el-menu-item v-else index="/login">
            <el-icon>
                <User/>
            </el-icon>
            登录
        </el-menu-item>

    </el-menu>
</template>

<script>
import useStore from "@/store/UserStore";
import searchStore from "@/store/searchStore";
import pinia from "@/store/pinia";
import {Search} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";

const store = useStore(pinia);
const sStore = searchStore(pinia)

export default {
    name: "HeaderMenu",
    computed: {
        activeIndex() {
            return this.$route.path
        },
        hasUserInfo() {
            return this.store.userInfo.userId !== 0;
        },

    },
    data() {
        return {
            store, sStore,
            Search,
            searchText: "",
        }
    },
    methods: {
        logout() {
            window.sessionStorage.removeItem("userInfo")
            window.sessionStorage.removeItem("token")
            store.$reset()
            this.$router.push({name: "login"})
        },
        openSearch() {
            if (this.sStore.searchText==='' || this.sStore.searchText===undefined){
                ElMessage.error({showClose: true, message: "你总得输入点啥才可以搜索吧！！！", duration: 1000})
                return
            }

            sStore.setSearchFlag(true)
        }
    },
}
</script>

<style scoped>
.flex-grow {
    flex-grow: 1;
}

.headImg {
    height: 25px;
    border-radius: 50%;
    border: 1px solid #6fe7c8;
    margin-right: 10px
}
</style>